import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Card, Col, DatePicker, RangePicker, Row } from 'ant-design-vue'
import dayjs, { Dayjs } from 'dayjs'
import { nextTick } from 'vue'

export type DateType = 'today' | 'lastSeven' | 'lastThirty' | 'month' | 'year'

@Component
export class DataSummary extends Render {

    @Prop({ default: 'today' }) defaultType?: DateType
    @Prop() startDate!: string
    @Prop() endDate!: string

    activeType: null | DateType = this.defaultType || 'today'

    rangeDate = [] as Dayjs[]
    @Emit('update:startDate')
    updateStartDate(val: string) {
        return val
    }
    @Emit('update:endDate')
    updateEndDate(val: string) {
        return val
    }

    @Emit('change')
    emitChange(){
        return {
            startDate: this.startDate,
            endDate: this.endDate
        }
    }

    tabData = [
        {
            label: '今天',
            key: 'today'
        },
        {
            label: '近7天',
            key: 'lastSeven'
        },
        {
            label: '近30天',
            key: 'lastThirty'
        },
        {
            label: '本月',
            key: 'month'
        },
        {
            label: '全年',
            key: 'year'
        },
    ]

    /**
     * 获取今天、近7天、近30天、本月、全年对应的开始日期和结束日期
     * @returns 
     */
    getDateTypeValue() {
        return {
            today: {
                startDate: dayjs().format('YYYY-MM-DD'),
                endDate: dayjs().format('YYYY-MM-DD')
            },
            lastSeven: {
                startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
                endDate: dayjs().format('YYYY-MM-DD')
            },
            lastThirty: {
                startDate: dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
                endDate: dayjs().format('YYYY-MM-DD')
            },
            month: {
                startDate: dayjs().startOf('month').format('YYYY-MM-DD'),
                endDate: dayjs().endOf('month').format('YYYY-MM-DD')
            },
            year: {
                startDate: dayjs().startOf('year').format('YYYY-MM-DD'),
                endDate: dayjs().endOf('year').format('YYYY-MM-DD')
            }
        }
    }

    onChangeDate(key: DateType) {
        this.activeType = key
        const values = this.getDateTypeValue()[this.activeType as DateType]
        this.updateStartDate(values.startDate)
        this.updateEndDate(values.endDate)
        this.rangeDate = [dayjs(values.startDate), dayjs(values.endDate)]
        nextTick(() => {
            this.emitChange()
        })
    }

    /**
     * 选择日期范围，反推是不是今天、近7天、近30天、本月、全年
     * @param dates 
     * @returns 
     */
    onChangeRangePicker(dates: [string, string] | [Dayjs, Dayjs]) {
        if (!dates) return
        const values = this.getDateTypeValue()
        this.activeType = null
        for (const key in values) {
            if (values[key as keyof typeof values].startDate === dates[0] && values[key as keyof typeof values].endDate === dates[1]) {
                this.activeType = key as DateType
                break
            }
        }
        this.updateStartDate(dates[0] as string)
        this.updateEndDate(dates[1] as string)
        nextTick(() => {
            this.emitChange()
        })
    }

    render() {
        return (
            <div class="mb-12px">
                <Row align="middle" justify="space-between" gutter={20}>
                    {
                        this.tabData.map(i => {
                            return <Col>
                                <div onClick={() => this.onChangeDate(i.key as DateType)} class={`${this.activeType === i.key ? 'text-blue-100' : ''} cursor-pointer`}>
                                    {i.label}
                                </div>
                            </Col>
                        })
                    }
                    <Col>
                        <RangePicker v-model:value={this.rangeDate} format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" onChange={this.onChangeRangePicker}></RangePicker>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default toNative<{
    defaultType?: DateType
    startDate?: string
    endDate?: string
}, {change: () => { startDate: string, endDate: string }}>(DataSummary)
